<template>
  <div class="rank" :class="'rank-'+rank">
  </div>
</template>

<script>
  export default {
    name: 'hello',
    props: ['rank']
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .rank {
    display: inline-block;
    width: 75px;
    height: 24px;
    cursor: pointer;
    background: url("../assets/rank.png") no-repeat -9px;
    vertical-align: top;
  }

  .rank-1 {
    background-position-y: -6px;
  }

  .rank-2 {
    background-position-y: -31px;
  }

  .rank-3 {
    background-position-y: -56px;
  }

  .rank-4 {
    background-position-y: -80px;
  }

  .rank-5 {
    background-position-y: -105px;
  }

</style>
